<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>详情</title>
	<link rel="icon" href="">
	<link rel="stylesheet" type="text/css" href="/static/css/aui.css" />
    <script type="text/javascript">
        function get_id(bnt){
            $(".comment"+bnt).toggle();
            $.getJSON("{% url 'mycampus:comment_child' %}",{'a':bnt},function(item){
                var wrap = document.getElementById("demo"+bnt);
                document.getElementById("demo"+bnt).innerHTML = '';
                for (var i = item.length - 1; i >= 0; i--) {
                    var date1 = item[i][2].substr(0,10);
                    var date2 = item[i][2].substr(11,5);
                    var html = '<div class="aui-card-list" style="background: #f0f0f0;padding: 0;border-bottom: 1px dashed #000">'+'<div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">'+'<div class="aui-info-item">'+'<span class="aui-margin-l-5"><h3 style="color: #333;font-weight: 900">'+item[i][0]+'</h3></span>'+'</div>'+'<div class="aui-info-item">'+date1+' '+date2+'</div>'+'</div>'+'<div class="aui-card-list-content-padded">'+item[i][1]+'</div></div>';

                    wrap.insertAdjacentHTML('afterbegin', html);
                }
            });
        }
    </script>
    <style type="text/css">
        body{
            background-color: #f7f8fa;
        }
        .item{
            padding: 10px;
            border-bottom: 1px solid #ddd;
            background-color: #fff;
        }
        .item p{
            font-size: 14px;
        }
        .box{
            padding: 10px;
            background-color: #fff;
        }
        .rg{display: block;}
        @media (max-width: 768px) { 
                .rg{
                    display: none;
                }
        }
    </style>
</head>
<body>
    <header class="aui-bar aui-bar-nav" id="header" style="background-color: #27AE60;padding-top:12px; ">
        <a class="aui-pull-left aui-btn" href="{% url 'mycampus:index'  %}">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title" value="aaaa">详情</div>
    </header>
    <section class="aui-content">
        <div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
            <div class="aui-info-item">
                <img src="/static/{{ news.publisher_id.userPicture }}" class="aui-img-round" style="width:32px;height: 32px;margin: 5px 0 5px 0;"/><span class="aui-margin-l-5"><h3 style="color: #333;font-weight: 900">{{ news.publisher }}</h3></span>
                </div>
            <div class="aui-info-item">{{ news.time|date:"Y-m-d H:i" }}</div>
        </div>
    </section>
    <section class="aui-content">
        <div class="item">
            <div class="by">
                <h2>{{ news.title }}</h2>
                <p>{{ news.content }}</p>
                {% if news.images %}
                <p>
                    <img src="/static/{{news.images}}" style="max-width: 100%;margin:20px auto 0 ">
                </p>
                {% endif %}
            </div>
            <div class="foot" style="text-align: right;">
                <!-- <p><div class="aui-btn aui-btn-info">评论 20</div></p> -->
                <div class="aui-info aui-font-size-12 aui-padded-t-0 aui-padded-b-0">
                    <div class="aui-info-item"></div>
                    <div class="aui-info-item" style="">
                        <i class="aui-iconfont aui-icon-comment aui-padded-r-5 comment" value="comment" style="color:#00bcd4;font-size: 1.4rem;"><font style="font-size: 15px;">{{news.counts}}</font></i>
                         <a href="{% url 'mycampus:news_like_post' news.id  %}" >
                        <i class="aui-iconfont aui-icon-like" style="color:#e91e63;font-size: 1.4rem"><font style="font-size: 15px;">{{news.likes}}</font></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
            <!-- 发表父评论 -->
            <div class="aui-card-list comment_content" style="background: #f2f3f4;border: 1px solid #E7E9EA;border-radius:2px;margin: 0px 20px;display: none;">
                <form role="form" action="{% url 'mycampus:comments_news' news.id  %}" method="post" enctype="multipart/form-data" onsubmit="return check_father()">
                    {% csrf_token %}
                    <div class="aui-card-list-header">
                            <input type="file" name="image" onchange="imgPreview(this)" />
                    </div>
                    <div class="aui-card-list-content-padded">
                        <img id="preview" /><br/>
                        <textarea id="content" placeholder="评论..." name="content"></textarea>
                        </span><span id="errorecontent" style="display:none;color:red;">评论不能为空！</span>
                    </div>
                    <div class="aui-card-list-footer">
                          <button type="submit" type="button" class="aui-btn aui-btn-primary">发表</button>
                    </div>
                </form>
            </div>
    </section>
    <!-- 显示父评论内容 -->
      
    <section class="aui-content-padded">
        {% for comment in comments %}
        {% if comment.ifchild %}
                <div class="aui-card-list" style="background: #f0f0f0;padding: 0;">
                    <div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
                        <div class="aui-info-item">
                            <!-- <img src="/static/{{comments_user_image}}" style="width:1.5rem" class="" /> -->
                            <span class="aui-margin-l-5"><h3 style="color: #333;font-weight: 900">{{comment.critisID}}</h3></span>
                        </div>
                        <div class="aui-info-item">{{ comment.time|date:"Y-m-d H:i" }}</div>
                    </div>
                    <div class="aui-card-list-content-padded">
                        <div>{{comment.content}}</div>
                        <div class="footer">
                            <div class="aui-info aui-font-size-12 aui-padded-t-0 aui-padded-b-0">
                                <div class="aui-info-item"></div>
                                <div class="aui-info-item"> 
                                    <i class="aui-iconfont aui-icon-comment aui-padded-r-5 comment1" onclick="get_id('{{comment.id}}')" style="color:#00bcd4;font-size: 1.4rem;"><font style="font-size: 15px;">…</font></i>
                                </div>
                            </div>
                        </div>
                    </div>  
                    <!-- 发表子评论 -->
                    <div class="aui-card-list comment{{comment.id}}" style="background: #f2f3f4;border: 1px solid #E7E9EA;border-radius:2px;margin: 0px 20px;display: none;">
                        <form role="form" action="{% url 'mycampus:childcomments_news' comment.id %}" method="post" enctype="multipart/form-data" onsubmit="return check_child()">
                            {% csrf_token %}
                            <div class="aui-card-list-content-padded">
                                <!-- <img id="preview" /><br/> -->
                                <textarea id="title" placeholder="回复..." name="content" onblur="return cheack_title()"></textarea>
                                </span><span id="erroretitle" style="display:none;color:red;">评论不能为空！</span>
                            </div>
                            <div class="aui-card-list-footer">
                                  <button type="submit" type="button" class="aui-btn aui-btn-primary">发表</button>
                            </div>
                        </form>
                        <!-- 显示子评论 -->
                        <div id="demo{{comment.id}}">
                        </div>
                    </div>
                </div>
        {% else %}
        <div class="aui-card-list" style="background: #f0f0f0;padding: 0;">
            <div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
                <div class="aui-info-item">
                    <!-- <img src="/static/{{comments_user_image}}" style="width:1.5rem" class="" /> -->
                    <span class="aui-margin-l-5"><h3 style="color: #333;font-weight: 900">{{comment.critisID}}</h3></span>
                </div>
                <div class="aui-info-item">{{ comment.time|date:"Y-m-d H:i" }}</div>
            </div>
            <div class="aui-card-list-content-padded">
                <div>{{comment.content}}</div>
                <div class="footer">
                    <div class="aui-info aui-font-size-12 aui-padded-t-0 aui-padded-b-0">
                        <div class="aui-info-item"></div>
                        <div class="aui-info-item"> 
                            <i class="aui-iconfont aui-icon-comment aui-padded-r-5 comment1" onclick="get_id('{{comment.id}}')" style="color:#00bcd4;font-size: 1.4rem;"><font style="font-size: 15px;">0</font></i>
                            <!-- <input type="text" name="comment_id" id="comment_id" value="comment{{comment.id}}" style="display: none;"> -->
                        </div>
                    </div>
                </div>
            </div>  
            <!-- 发表子评论 -->
            <div class="aui-card-list comment{{comment.id}}" style="background: #f2f3f4;border: 1px solid #E7E9EA;border-radius:2px;margin: 0px 20px;display: none;">
                <form role="form" action="{% url 'mycampus:childcomments_news' comment.id %}" method="post" enctype="multipart/form-data" onsubmit="return check_child()">
                    {% csrf_token %}
                    <div class="aui-card-list-content-padded">
                        <!-- <img id="preview" /><br/> -->
                        <textarea id="title" placeholder="回复..." name="content"></textarea>
                        </span><span id="erroretitle" style="display:none;color:red;">评论不能为空！</span>
                    </div>
                    <div class="aui-card-list-footer">
                          <button type="submit" type="button" class="aui-btn aui-btn-primary">发表</button>
                    </div>
                </form>
            </div>
        </div>
        {%endif%}
        {% endfor %}
    </section>

    <script type="text/javascript" src="/static/js/api.js"></script>
    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <!-- IOS兼容 -->
    <script type="text/javascript">
        apiready = function(){
                if(api.systemType == 'ios'){
                    scaleEnabled = true;
                    // document.getElementById('header').style.paddingTop = '10px';
                }
                //支持沉浸式效果
                if (!api.statusBarAppearance) {
                   document.getElementById('header').style.paddingTop = '0px';
                }
                // <!-- 图片懒加载 -->
                new auiLazyload({
                    errorImage:'../image/error-img.png'
                });
            };
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            var abc = "comment";
            $("."+abc).click(function(){
                $(".comment_content").toggle();
            });
            $("*[name='name']").val(); //获取vlaue值 
            $("#content").blur(function(){
                var value = $(this).val();
                value = $.trim(value);
                if(value == ''){
                    $("#erroretitle").show();
                    return false;
                }
                else{
                    $("#erroretitle").hide();
                }
            });
        });
    </script>
    <script type="text/javascript">
        function check_father(){
            var content = $("#content").val();
            if(content.length<1){
                $("#errorecontent").show();
                return false;
            }
            else{
                $("#errorecontent").hide();
                return true;
            }

        }
        function check_child(){
            var title = $("#title").val();
            if(title.length<1){
                $("#erroretitle").show();
                return false;
            }
            else{
                $("#erroretitle").hide();
                return true;
            }

        }
    </script>
</body>
</html>
